<script lang="ts" setup>
import type {
  CodeRuleConfigPageQo,
} from '#/system/codeConfig'
import {
  deleteCodeRuleConfigApi,
  getCodeRuleConfigPageListApi,
} from '@/api/system/codeConfig'
import { Edit } from '@element-plus/icons-vue'
import Details from './details.vue'

defineOptions({
  name: 'SystemCodeConfig',
})

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    label: '规则标识',
    prop: 'ruleKey',
    align: 'center',
  },
  {
    label: '规则名称',
    align: 'center',
    prop: 'ruleName',
  },
  {
    label: '固定前缀',
    align: 'center',
    prop: 'prefix',
  },
  {
    label: '日期格式',
    align: 'center',
    prop: 'dateFormat',
  },
  {
    label: '序号类型',
    align: 'center',
    prop: 'seqType',
    type: 'dict',
    dictType: 'code_config_seq_type',
  },
  {
    label: '序号长度',
    align: 'center',
    prop: 'seqLength',
  },
  {
    label: '固定后缀',
    align: 'center',
    prop: 'suffix',
  },
  {
    label: '分隔符',
    align: 'center',
    prop: 'delimiter',
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    type: 'slot',
    width: 200,
  },
]
const detailsRef = $ref<InstanceType<typeof Details>>()
let selectionList = $ref<string[]>([])

// 搜索
const [search, resetClk] = useResetState<CodeRuleConfigPageQo>(
  { pageNum: 1, pageSize: 10, total: 0 },
  () => {
    loadedTable()
  },
)
// 分页
const { loadedTable, tableData, loading, paginationChange } = useTablePaging(
  getCodeRuleConfigPageListApi,
  search,
)
// 打开对话框
async function openDialog(action: DialogAction, id?: string) {
  if (!detailsRef)
    return
  const { type } = await detailsRef?.showDialog({
    title: `${DialogActionMap[action]}编码配置`,
    action,
    model: {
      id,
    },
  })
  if (!type)
    return
  loadedTable()
}

// 删除
const [deleteBatch] = useDeleteBatch($$(selectionList), deleteCodeRuleConfigApi, () => {
  loadedTable()
  selectionList = []
})

onMounted(() => {
  loadedTable()
})
</script>

<template>
  <div
    un-flex="~ col"
    un-h="full"
  >
    <el-card
      un-m-b="2.5"
      body-style="height: 100%;"
      style="overflow: visible;"
    >
      <el-form
        :inline="true"
        :model="search"
        un-grid="~ cols-4"
        class="single-row-search-form"
      >
        <el-form-item label="规则标识" prop="name">
          <el-input v-model="search.ruleKey" placeholder="请输入规则标识" clearable />
        </el-form-item>
        <el-form-item label="规则名称">
          <el-input v-model="search.ruleName" placeholder="请输入规则名称" clearable />
        </el-form-item>
        <el-form-item label="序号类型" prop="seqType">
          <sy-dict
            v-model="search.seqType"
            dict-type="code_config_seq_type"
            placeholder="请选择状态"
            type="select"
          />
        </el-form-item>
        <el-form-item>
          <sy-search-button @search="loadedTable" @reset="resetClk" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      un-h-full
      body-style="height: 100%;"
    >
      <sy-table
        v-model:selection="selectionList"
        row-key="id"
        height="100%"
        border
        selection-chenge-use="id"
        add-btn-perms="code:config:add"
        delete-btn-perms="code:config:delete"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :paging="search"
        @paging-change="paginationChange"
        @refresh="loadedTable"
        @click-add="openDialog('add')"
        @click-del="deleteBatch"
      >
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            @click="openDialog('views', row.id)"
          >
            <template #icon>
              <el-icon><Edit /></el-icon>
            </template>
            查看
          </el-button>
          <el-button
            v-auth="'code:config:edit'"
            link
            type="primary"
            @click="openDialog('edit', row.id)"
          >
            <template #icon>
              <el-icon><Edit /></el-icon>
            </template>
            编辑
          </el-button>
        </template>
      </sy-table>
    </el-card>
    <Details ref="detailsRef" />
  </div>
</template>

<style scoped>
:deep .sy-drawer__body {
  padding-top: 0 !important;
}
</style>
